<template>
  <div class="hello">
    <h1>$nextTick使用</h1>
    <div><span class="myred">说明:获取数据更新之后的DOM元素,当你去做一些延迟处理,
        或者是想获取数据更新之后的dom可以放到这个里面回调函数中:</span><span>
        $nextTick使用比较简单,就是用来获取数据更新之后的DOM的,把想要延后处理的逻辑放到nextTick的回调里面就行.
        Vue在数据变化的时候不会直接更新DOM，而是添加到一个任务队列里面。
        把同一个事件循环中发生的所有数据变化存到里面并去除重复的,来避免不必要的计算和DOM操作。然后，在下一个事件循环tick中，Vue刷新队列更新到真实DOM（已去重的）.
        所以说,如果想要数据变化.操作数据变换之后的dom就需要放到nextTick里面去.
        实际上里面相当于把回调函数放到了Promise.then里面去执行.如果不支持会放到MutationObserver和setImmediate里面,如果都不支持就放到SetTimeout里面去了,做了浏览器兼容性降级处理.不过我也看过vue3的源码,他里面只是放到了Promise.then里面了
      </span></div>
    <button id="firstBtn" @click="testClick()" ref="firstBtn">
      {{ testMsg }}
    </button>

    <input type="text" ref="inputEle" v-if="showSearch"> <button @click="handleClick">放大镜</button>
  </div>

</template>

<script>

export default {

  data () {
    return {
      testMsg: '未更新',
      showSearch: false
    }
  },
  computed: {},
  methods: {
    handleClick () {
      this.showSearch = !this.showSearch;
      // setTimeout(() => {
      // }, 0)
      // console.log("this.$refs.inputEle", this.$refs.inputEle)
      // Promise.resolve().then(() => {
      //   console.log("this.$refs.inputEle", this.$refs.inputEle)
      //   // this.$refs.inputEle.focus()

      // })
      this.$nextTick(() => {
        this.$refs.inputEle.focus()

      })
    },
    testClick () {
      // 多次改变数据
      this.testMsg = '已更新';
      this.testMsg = '再次更新';
      this.testMsg = '再再次更新';
      this.testMsg = '再再再次更新';
      this.testMsg = '再再再再次更新';
      this.testMsg = '最后更新';
      // 使用 nextTick回调获取DOM数据，nextTick里面的代码会在DOM更新后执行
      // 也可以作为一个 Promise 使用, 即不传回调
      // this.$nextTick().then(() => {
      //   console.log('nextTick作为Promise：', this.$refs.firstBtn.innerText); // => '最后更新'
      // });
      this.$nextTick(() => {
        console.log('nextTick回调：', this.$refs.firstBtn.innerText); // => '最后更新'
      });
      Promise.resolve().then(() => {
        console.log(' Promise.resolve', this.$refs.firstBtn.innerText); // => '最后更新'

      })
      setTimeout(() => {
        console.log('setTimeout', this.$refs.firstBtn.innerText); // => '最后更新'

      }, 0);
      // 想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新
      console.log('直接获取：', this.$refs.firstBtn.innerText); // => '未更新'
      console.log('啥也不干，就是玩。');
    },

  },
  created () {

  },
  mounted () {

  },
}
</script>
<style scoped></style>
